<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/Resources/animate/css/animate.min.css">
    <link rel="stylesheet" href="/Resources/animate/css/index.css">
</head>

<body>
    <div class="animate-wrap">
        <div class="animate-banner1-wrap">
            <div class="animate-banner1 w1180">
                <img src="/Resources/animate/images/banner1-phone.png" alt="" class='banner1-phone wow slideInUp' data-wow-delay="1s" data-wow-duration="1.2s">
                <div class="banner1-title wow bounceInDown" data-wow-duration="1s">
                    <p class='title1'>
                        找钢指数客户端
                    </p>
                    <p class='title2'>
                        5分钟更新一次价格信息
                    </p>
                    <p class='title3'>
                        找钢网旗下的一款看钢市实时价格的手机软件
                    </p>
                </div>
                <div class="banner1-ewm">
                    <img src="/Resources/animate/images/banner1-ewm.png" alt="" class='flipInX wow' data-wow-delay="1.2s" data-wow-duration="1s">
                    <a class='ios wow fadeInRight' href='javascript:;' data-wow-delay="1.2s" data-wow-duration="1s">
                        iPhone客户端
                    </a>
                    <a class='andorid wow fadeInRight' href='javascript:;' data-wow-delay="1.2s" data-wow-duration="1s">
                        Android客户端
                    </a>
                </div>
            </div>
        </div>
        <div class="animate-banner2-wrap">
            <div class="animate-banner2 w1180">
                <img src="/Resources/animate/images/banner2-phone.png" alt="" class='viewsection banner2-phone wow  slideInUp' data-wow-duration="1.3s">
                <div class="banner2-title">
                    <img src="/Resources/animate/images/banner2-title.png" alt="" class='viewsection wow zoomIn' data-wow-duration="1.2s">
                </div>
                <div class="banner2-list">
                    <p class='viewsection wow flipInX' data-wow-delay="1s">百家钢厂 万条规格价格</p>
                    <ul>
                        <li class='flipInX wow' data-wow-delay="1.3s">
                            <i class='banner-icon banner-icon-list'></i> 拒绝传统人工采价
                        </li>
                        <li class='flipInX wow' data-wow-delay="1.6s">
                            <i class='banner-icon banner-icon-list'></i> 价格由找钢商城交易系统自动生成
                        </li>
                        <li class='flipInX wow' data-wow-delay="1.9s">
                            <i class='banner-icon banner-icon-list'></i> 无任何人工干扰因素
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="animate-banner3-wrap">
            <div class="animate-banner3 w1180">
                <img src="/Resources/animate/images/banner3-phone.png" alt="" class='banner3-phone wow slideInUp' data-wow-duration="1.3s">
                <div class="banner3-title">
                    <img src="/Resources/animate/images/banner3-title.png" alt="" class='flipInX wow' data-wow-duration="1.4s">
                </div>
                <div class="banner3-list">
                    <p class='wow lightSpeedIn'>103家直采合作钢厂 日均交易量约10万吨</p>
                    <ul class='wow bounceInLeft' data-wow-duration="1.4s">
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 每日发布找钢商城建材、热卷、中板、冷镀四大品种当天成交量
                        </li>
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 真实反映市场供需行情
                        </li>
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 全面反映了全国螺纹、热轧类钢厂供需情况
                        </li>
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 找钢指数是找钢网官方发布成交量的唯一发布窗口
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="animate-banner4-wrap">
            <div class="animate-banner4 w1180">
                <img src="/Resources/animate/images/banner4-phone.png" alt="" class='banner4-phone wow slideInUp' data-wow-duration="1.3s">
                <div class="banner4-title wow tada" data-wow-duration="1.3s">
                    <img src="/Resources/animate/images/banner4-title.png" alt="">
                </div>
                <div class="banner4-list wow flash" data-wow-duration="1.3s">
                    <p>百家钢厂 万条规格价格</p>
                    <ul>
                        <li>
                            <i class='banner-icon banner-icon-list'></i> 100家主流钢厂基价免费看
                        </li>
                        <li>
                            <i class='banner-icon banner-icon-list'></i> 23城市基价免费看
                        </li>
                        <li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="animate-banner5-wrap">
            <div class="animate-banner5 w1180">
                <img src="/Resources/animate/images/banner5-phone.png" alt="" class='banner5-phone wow slideInUp' data-wow-duration="1.3s">
                <div class="banner5-title wow rubberBand" data-wow-duration="1.3s">
                    <img src="/Resources/animate/images/banner5-title.png" alt="">
                </div>
                <div class="banner5-list wow fadeInLeft" data-wow-delay="1s" data-wow-duration="1s">
                    <ul>
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 直观显示短期价格趋势
                        </li>
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 助力行情预判
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="animate-banner6-wrap">
            <div class="animate-banner6 w1180">
                <img src="/Resources/animate/images/banner6-phone.png" alt="" class='banner6-phone wow slideInUp' data-wow-duration="1.3s">
                <div class="banner6-title wow zoomInDown">
                    <img src="/Resources/animate/images/banner6-title.png" alt="">
                </div>
                <div class="banner6-list">
                    <ul>
                        <li class='wow fadeInRight' data-wow-duration="1s" data-wow-delay="1s">
                            <i class='banner-icon banner-icon-list'></i> 期现指数：
                            <p>
                                上海螺纹、上海热卷、钢坯、铁矿石价格及基差走势图
                            </p>
                        </li>
                        <li class='wow fadeInRight' data-wow-duration="1s" data-wow-delay="1s">
                            <i class='banner-icon banner-icon-list'></i> 景气指数：
                            <p>
                                全国钢铁交易市场成交活跃地图，钢铁市场的晴雨表
                            </p>
                        </li>
                        <li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="animate-banner7-wrap">
            <div class="animate-banner7 w1180">
                <img src="/Resources/animate/images/banner7-phone.png" alt="" class='banner7-phone wow bounce' data-wow-duration="1.3s">
                <div class="banner7-title wow tada" data-wow-duration="1.3s">
                    <img src="/Resources/animate/images/banner7-title.png" alt="">
                </div>
                <div class="banner7-list wow flash">
                    <ul>
                        <li>
                            <i class='banner-icon banner-icon-list1'></i> 钢铁资讯动态发布，钢厂精英、顶尖投资大师等进驻点评
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="http://static-online.zhaogangtest.com/publicresource/js/jquery.min.js"></script>
<script src="/Resources/animate/js/wow.min.js"></script>
<script>
$(function() {
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init({});
    };

    function view(aim) {
        var mainOffsetTop = aim.offset().top;
        var mainHeight = aim.height();
        var winHeight = $(window).height();
        var winScrollTop = $(window).scrollTop();
        if (winScrollTop > mainOffsetTop + mainHeight || winScrollTop < 　mainOffsetTop - winHeight) {} else {
            aim.addClass('top')
        }
        $(window).scroll(function() {
            var winScrollTop = $(window).scrollTop();
            if (winScrollTop > mainOffsetTop + mainHeight || winScrollTop < 　mainOffsetTop - winHeight) {} else {
                aim.addClass('top')
            }
        })
    }
    view($(".banner2-phone"))
    view($(".banner2-title"))
    view($(".banner2-list"))

    view($(".banner3-phone"))
    view($(".banner3-title"))
    view($(".banner3-list"))
    view($(".banner4-phone"))
    view($(".banner4-title"))
    view($(".banner4-list"))
    view($(".banner5-phone"))
    view($(".banner5-title"))
    view($(".banner5-list"))
    view($(".banner6-phone"))
    view($(".banner6-title"))
    view($(".banner6-list"))
    view($(".banner7-phone"))
    view($(".banner7-title"))
    view($(".banner7-list"))
    $(window).scroll(function() {
        view($(".banner2-phone"))
        view($(".banner2-title"))
        view($(".banner2-list"))
        view($(".banner3-phone"))
        view($(".banner3-title"))
        view($(".banner3-list"))
        view($(".banner4-phone"))
        view($(".banner4-title"))
        view($(".banner4-list"))
        view($(".banner5-phone"))
        view($(".banner5-title"))
        view($(".banner5-list"))
        view($(".banner6-phone"))
        view($(".banner6-title"))
        view($(".banner6-list"))
        view($(".banner7-phone"))
        view($(".banner7-title"))
        view($(".banner7-list"))
    })

})
</script>

</html>